<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>首页，欢迎租车</title>
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.6.2/css/layui.css"/>
</head>
<style>
    .layui-body {
        margin-top: 60px;
        position: initial !important;

    }

    .center-context {
        background: #f2f2f2;
    }

    .call-board > a {
        height: 25px;
        padding-left: 5px;
    }

    .layui-footer {
        left: 0 !important;
        text-align: center;
    }
</style>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">汽车租赁</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="/main">首页</a></li>
      <li class="layui-nav-item"><a th:href="'/main/type?carTypeId='+${types.get(0).id}">车辆分类</a></li>
      <li class="layui-nav-item"><a th:href="'/main/notice/'+${notices.get(0).id}">公告</a></li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li th:if="not ${session.customerId}" class="layui-nav-item"><a id="login" href="/customerLogin">登录</a></li>
      <li th:if="${session.customerId}" class="layui-nav-item"><img src="/default.jpg" class="layui-nav-img"></li>
      <li th:if="${session.customerId}" class="layui-nav-item"><span th:text="${session.customer.username}"></span></li>
      <li th:if="${session.customerId}" class="layui-nav-item"><a href="/myOrder">我的订单</a></li>
      <li th:if="${session.customerId}" class="layui-nav-item  layui-this"><a href="#">个人中心</a></li>
      <li th:if="${session.customerId}" class="layui-nav-item"><a id="exit" href="/customer/exit">退出</a></li>
    </ul>
  </div>

  <div class="layui-body layui-container">
    <div class="layui-container" style="padding: 15px;">
      <div class="layui-row  layui-col-space10">
        <div class="layui-col-md2">
          <div style="text-align: center">汽车分类</div>
          <div class="layui-panel">
            <ul class="layui-menu">
              <li th:each="type:${types}">
                <div class="layui-menu-body-title">
                  <a th:href="'/main/type?carTypeId='+${type.id}" th:text="${type.name}"></a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="layui-col-md8 center-context">
          <form class="layui-form" lay-filter="username">
            <div class="layui-form-item">
              <label class="layui-form-label">用户名</label>
              <div class="layui-input-inline">
                <input id="username" type="text" th:value="${info.username}" name="username" readonly required
                       lay-verify="required" autocomplete="off"
                       class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">用户名不能更改</div>
            </div>
            <!--private BigDecimal money;-->
            <div class="layui-form-item">
              <label class="layui-form-label">余额</label>
              <div class="layui-input-inline">
                <input type="text" name="money" th:value="${info.money}" readonly required lay-verify="required|money"
                       placeholder="请输入余额" autocomplete="off"
                       class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">余额</div>
              <button type="submit" lay-filter="submitTopUp" class="layui-btn" lay-submit>充值</button>
            </div>
          </form>
          <form class="layui-form" lay-filter="info">
            <!-- id是隐藏的，但是提交时会一起提交给后台-->
            <div class="layui-form-item">
              <label class="layui-form-label">手机号</label>
              <div class="layui-input-inline">
                <input id="phone" type="tel" th:value="${info.phone}" name="phone" required lay-verify="required|phone"
                       placeholder="请输入手机号"
                       autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">请输入手机号</div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">邮箱</label>
              <div class="layui-input-inline">
                <input type="text" name="email" th:value="${info.email}" required lay-verify="required|email"
                       placeholder="请输入邮箱" autocomplete="off"
                       class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">邮箱</div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">性别</label>
              <div class="layui-input-inline">
                <input th:checked="${info.gender=='男'}" type="radio" name="gender" value="男" title="男">
                <input th:checked="${info.gender=='女'}" type="radio" name="gender" value="女" title="女">
              </div>
            </div>

            <!--private String address;-->
            <div class="layui-form-item">
              <label class="layui-form-label">地址</label>
              <div class="layui-input-inline">
                <input type="text" name="address" th:value="${info.address}" required lay-verify="required"
                       placeholder="请输入地址" autocomplete="off"
                       class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">地址</div>
            </div>
            <!--private String occupation;-->
            <div class="layui-form-item">
              <label class="layui-form-label">职业</label>
              <div class="layui-input-inline">
                <input type="text" name="occupation" th:value="${info.occupation}" required lay-verify="required"
                       placeholder="请输入身份证" autocomplete="off"
                       class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">职业</div>
            </div>
            <!--private String idNumber;-->
            <div class="layui-form-item">
              <label class="layui-form-label">身份证</label>
              <div class="layui-input-inline">
                <input type="text" name="idNumber" th:value="${info.idNumber}" required lay-verify="required|identity"
                       placeholder="请输入身份证" autocomplete="off"
                       class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">身份证</div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button type="submit" lay-filter="info-submit" class="layui-btn" lay-submit>立即提交</button>
              </div>
            </div>
          </form>
          <form class="layui-form" lay-filter="password">
            <div class="layui-form-item">
              <label class="layui-form-label">旧密码</label>
              <div class="layui-input-inline">
                <input id="oldPassword" type="password" name="oldPassword" required lay-verify="required|pass"
                       placeholder="请输入密码"
                       autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">请输入6-12密码</div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">新密码</label>
              <div class="layui-input-inline">
                <input id="newPassword" type="password" name="newPassword" required lay-verify="required|pass"
                       placeholder="请输新入密码"
                       autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">请输入6-12密码</div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">确认密码</label>
              <div class="layui-input-inline">
                <input id="newPassword2" type="password" name="newPassword2" required lay-verify="required|pass"
                       placeholder="请再一次输入"
                       autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">请输入6-12密码</div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button type="submit" lay-filter="password-submit" class="layui-btn" lay-submit>立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
        </div>
        <div class="layui-col-md2">
          <div style="text-align: center;background: #a3b9c3;font-size: 20px;" >公告</div>
          <div class="layui-panel call-board layui-nav layui-bg-cyan">
            <div th:each="notice:${notices}" style="margin-bottom: 10px;"><a th:href="'/main/notice/'+${notice.id}" style="color: #ffffffbd;">[[${notice.title}]]</a></div>
            <div style="text-align: center" th:if="${notices.size() eq 0}"> 暂无</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://www.layuicdn.com/layui-v2.6.2/layui.js"></script>
<script>
  layui.use(['form', 'layer'], function () {
    let form = layui.form;
    let layer = layui.layer;
    let $ = layui.$;
    form.on('submit(info-submit)', (data) => {
      $.ajax({
        'contentType': 'application/json;charset=utf-8',
        'data': JSON.stringify(data.field),
        'url': '/api/customer/' + [[${info.id}]],
        'type': 'put',
        success: function (data) {
          if (data.code && data.code === 200) {
            layer.msg('修改成功');
          } else if (data.code === 0) {
            layer.msg(data.message);
          }
        }
      });
      return false;
    });

    form.on('submit(submitTopUp)', () => {
      layer.prompt("请输入要充值的钱数", (value, index) => {
        if (!'.'.includes(value)) {
          // 加上小数后缀
          value = value + ".00";
        }
        const reg = new RegExp('^(([1-9][0-9]{0,14})|([0])|(([0]\\.\\d{1,2}|[1-9][0-9]{0,14}\\.\\d{1,2})))$');
        if (!reg.test(value)) {
          layer.msg("请输入合法的金额");
          return;
        }
        $.ajax({
          'data': "money=" + value,
          'url': '/api/customer/topUp',
          'type': 'post',
          success: function (data) {
            if (data.code && data.code === 200) {
              layer.msg('充值成功');
              layer.close(index);
              setTimeout(() => {
                location.reload()
              }, 1000)
            } else if (data.code === 0) {
              layer.msg(data.message);
            }
          }
        });
      })
      return false;
    })


    form.verify({
      money: function (value) {//value：表单的值、item：表单的DOM对象
        if (!'.'.includes(value)) {
          // 加上小数后缀
          value = value + ".00";
        }
        const reg = new RegExp('^(([1-9][0-9]{0,14})|([0])|(([0]\\.\\d{1,2}|[1-9][0-9]{0,14}\\.\\d{1,2})))$');
        if (!reg.test(value)) {
          return '请输入合法的金额';
        }
      },
      pass: [
        /^[\S]{6,12}$/
        , '密码必须6到12位，且不能出现空格'
      ]
    });

    form.on('submit(password-submit)', (data) => {
      $.ajax({
        'contentType': 'application/json;charset=utf-8',
        'data': JSON.stringify(data.field),
        'url': '/api/customer/updatePassword',
        'type': 'put',
        success: function (data) {
          if (data.code && data.code === 200) {
            layer.msg('修改成功');
            setTimeout(() => {
              location.reload()
            }, 1000)
          } else {
            layer.msg(data.message);
          }
        }
      });
      return false;
    });
  });

</script>
</body>
</html>
